import React, { Component } from 'react'
import ReactDOM from 'react-dom'

/**
 * 获取按下和松开的坐标接口组件
 */
export default class Gesture extends Component {
  constructor (props) {
    super(props)
    
    this.node = null
    this.startScreen = {
      X: 0,
      Y: 0
    }
    this.distanceScreen = {
      X: 0,
      Y: 0
    }
    this.moveScreen = {
      X: 0,
      Y: 0
    }

    this.onMousemove = this.onMousemove.bind(this)
    this.onMouseUp = this.onMouseUp.bind(this)
  }
  componentDidMount () {
    this.node = ReactDOM.findDOMNode(this)
    this.node.style.userSelect = 'none'
    this.node.addEventListener('mousedown', (e) => {

      this.startScreen.X = e.screenX
      this.startScreen.Y = e.screenY

      this.props.onMousedown && this.props.onMousedown(this.startScreen)

      document.addEventListener('mousemove', this.onMousemove)
      document.addEventListener('mouseup', this.onMouseUp)
    })
  }
  onMousemove (e) {
    this.moveScreen.X = e.screenX
    this.moveScreen.Y = e.screenY
    this.distanceScreen.X = this.moveScreen.X - this.startScreen.X
    this.distanceScreen.Y = this.moveScreen.Y - this.startScreen.Y

    this.props.onMousemove && this.props.onMousemove(this.startScreen, this.moveScreen, this.distanceScreen)
  }
  onMouseUp (e) {
    this.moveScreen.X = e.screenX
    this.moveScreen.Y = e.screenY
    this.props.onMouseup && this.props.onMouseup(this.moveScreen)
    document.removeEventListener('mousemove', this.onMousemove)
    document.removeEventListener('mouseup', this.onMouseUp)
  }
  render () {
    return(
      this.props.children
    )
  }
}